/* custom.css — custom styles for Cutline that YOU define ------------------------------------------------------ This stylesheet will allow you to futureproof your changes against future releases and upgrades. I know you work hard on your modified styles, and I don't want you to feel like every upgrade is a total drag! Instructions: Modifying existing Cutline styles to your liking is a breeze with this handy stylesheet. The tag within the header.php file has been appended with a CSS class called "custom," and thanks to this, you now have the ability to override ANY style that's declared in the original Cutline stylesheet. In practice, you simply need to copy the CSS for the element that you want to change (from style.css) and then paste it here. Prefix the new CSS declaration with .custom, and then make your tweaks as necessary. Here's an example: To change the default color of unvisited links from blue to red (#c00) and remove the default underline, this is what you would do: .custom a { color: #c00; text-decoration: none; } Cool? Now get to hackin! Orange: #da790b Slate Blue: #49647d */ /*.custom body { background: #809ab1 ; color: #000; font: 62.5% "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; text-align: center; }*/ /*.custom body { background: #809ab1 ; font-size: 12px; color: #000; font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; }*/ /*---:[ global elements ]:---*/ .custom code { color: #fff; font-family: "Lucida Grande", monospace; } .custom a img { border: 0; } .custom a { color: #da790b; text-decoration: none; } .custom a:visited { color: #49647d; text-decoration: none; } .custom a:hover { /* color: #49647d; */ color: none; text-decoration: underline; } .custom blockquote { color: #000; margin: 0 30px 20px 30px; border-left: 5px solid #ACAB7B; background: #e8e9dc url(images/bqt_Bg.png) top no-repeat; padding: 10px 10px 4px 10px; font-size: 11px; font-family: "Lucida Grande", Lucida, Verdana, Arial, Helvetica, sans-serif; } .custom abbr, acronym { text-transform: uppercase; cursor: help; } /*---:[ headlines ]:---*/ .custom h1 { font-size: 20px; letter-spacing: -0.8px; text-align: left; font-weight: normal; margin-bottom: 8px; font-family: "Century Gothic", "Trebuchet MS", "Lucida Grande", Lucida, Arial, sans-serif; } .custom #masthead h1 { padding: 0 0 0.2em 0; text-align: center; clear: both; } .custom h2 { font-size: 18px; letter-spacing: -0.5px; text-align: left; padding: 0px 0 0 0; text-transform: uppercase; font-weight: bold; color: #49647d; margin-bottom: 5px; font-family: "Century Gothic", "Trebuchet MS", "Lucida Grande", Lucida, Arial, sans-serif; } .custom h2.archive_head { font-weight: normal !important; font-size: 1.4em !important; text-transform: uppercase !important; letter-spacing: normal !important; margin: 0 0 0 0 !important; padding: 0 2px 0 0 !important; color: #49647d; } .custom h2 a { color: #da790b; /* color: none; */ text-decoration: none; } .custom h2 a:hover { background: none; /* color: #49647d;*/ color: none; text-decoration: underline; } .custom .posts h2 { margin: 0 0 0 0; line-height: 1.2em; } .custom .pages h2, h2.page_header { margin: 0 0 0 0; padding: 0 0 0 0; background: url('images/hr_title_sep.gif') 0 100% no-repeat; } .custom h4 { font: italic 1.4em Georgia, "Times New Roman", Times, serif; margin: 0 0 10px 0px; padding: 0; font-weight: normal; color: #888; } .custom .posts h4 { margin: 0.5em 0 0.5em 0; padding: 0 0 0.5em 0; background: url('images/hr_title_sep.gif') 0 100% no-repeat; } .custom h1.title { font-size: 45px; letter-spacing: -2.5px; font-weight: normal; padding: 10px 10px 10px 17px; } /*---:[ header styles ]:---*/ .custom #masthead { width: 970px; height: 298px; background: url('images/logo.gif') no-repeat; /* uncomment the height and background declarations here if you intend to use a graphic in the header instead of the h1 */ } .custom #masthead a { display: block; width: 970px; height: 298px; } /* uncomment this line if you use a graphic in the header - make sure the height of your header graphic is equal to the height declared in this line of code! */ .custom ul#nav { list-style: none; width: 970px; padding: 0 10px; float: left; clear: both; } .custom #header_img { position: relative; margin: 0 ; border-bottom: none; float: left; clear: both; } /*---:[ core layout elements ]:---*/ .custom #container { width: 970px; margin: 0px auto 0 auto; } .custom #content_box { width: 970px; background: #F7F7F5 url(images/contentBg2.gif) repeat-y ; text-align: left; float: center; clear: both; border-left: 1px solid #000; border-right: 1px solid #000; } .custom #content { width: 600px; color: #000; padding: 20px 20px 0 20px; float: left; } .custom #sidebar { width: 150px; background: #dcddca; padding: 20px 7px 0 8px; float: right; } .custom #l_sidebar { width: 150px; padding: 20px 8px 0 2px; float: left; } .custom #footer { width: 943px; background: #000; color: #fff; text-align: left; height: 33px; padding: 8px 8px 12px 21px; border-bottom: 1px solid #000; border-top: 1px solid #000; } .custom #footer a { color: #fff; } /*---:[ sidebar styles ]:---*/ .custom ul.sidebar_list li.widget, ul.sidebar_list li.linkcat { width: 150px; margin: 0 0 2.5em 0; font-size: 1.3em; line-height: 1.4em; float: left; } .custom li.widget li a:hover, li.linkcat li a:hover { background: none; /* color: #49647d;*/ color: none; text-decoration: underline; } .custom li.widget h2, li.linkcat h2 { font-weight: normal; font-size: 1.077em; color: #49647d; text-transform: uppercase; letter-spacing: normal; margin: 0 0 0.8em 0; padding: 0.4em 2px; } .custom li.widget ul, li.linkcat ul { list-style-image: url(images/bullet.png); margin: 0.5em 0 0.5em 20px; } /*---< Calendar widget styles >---*/ .custom #calendar_wrap { font-size: 1.1em; color: #49647d; padding: 0 0 0 10px; float: left; } /*---:[ content styles ]:---*/ .custom .entry blockquote { color: #000; margin: 0 30px 20px 30px; border-left: 5px solid #ACAB7B; background: #e8e9dc url(images/bqt_Bg.png) top no-repeat; width: 424px; padding: 10px 10px 4px 10px; font-size: 1.0em; font-family: "Lucida Grande", Lucida, Verdana, Arial, Helvetica, sans-serif; } .custom .entry p { margin-bottom: 15px; line-height: 1.6em; } .custom .entry ul, .entry ol { margin: 0 0 0 40px; } .custom .entry p a { border-bottom: 1px solid #ccc; text-decoration: none; } .custom .entry p a:hover { border-bottom: 2px solid #999898; text-decoration: underline; } .custom .entry p.center { text-align: center; } .custom .entry ul { list-style-image: url(images/bullet.png); } .custom .tagged { background: #e4e5d4; border: 1px solid #a0abb4; padding: 3px; font-size: 10px; } .custom .tagged a, .tagged a:visited { padding: 0; color: #da790b; text-decoration: none; } .custom .tagged a:hover { color: #49647d; background: none ; border-bottom: none; text-decoration: none; } .custom .navigation { width: 500px; font-size: 1.4em; float: left; } .custom .previous { padding: 0 20px 0 0; float: left; } .custom .nextCL { float: right; } .custom .add_comment { display: block; padding: 0 0 0 0px; font-weight: bold; float: right; } .sidebarIcon ul { list-style-image: url(images/tag.png); list-style-position: inside; } /***** NAVIGATION BAR FORMATTING *****/ .custom ul#nav { margin: 0; padding: 0; list-style: none; width: 970px; float: left; /* background: #49647d url(images/navOnBlue.gif) repeat-x; */ background: #49647d url(images/NavBG.jpg) repeat-x; font-family: "Lucida Grande", Lucida, Arial, sans-serif; font-size: 14px; border-top: none; border-bottom: 1px solid #000; } .custom ul#nav li { float: right; border-left: 1px solid #fff; } .custom ul#nav li.first { border-left: none; } .custom ul#nav a { display: block; float: left; padding: 0 1.45em, 0, 0; line-height: 25px; text-decoration: none; color: #fff; } .custom ul#nav a:hover { background: #cf7f26 url(images/navOff.gif) repeat-x; text-decoration: none; } .custom ul#nav li.current a { color: #fff; background: url(images/navOff.gif) repeat-x; text-decoration: none; } ul#nav li.current_page_item a { color: #fff; background: url(images/navOff.gif) repeat-x; text-decoration: none; } /*---:[ comment form styles ]:---*/ .custom #comment_form { width: 500px; padding: 1.0em 0 0 0; float: left; } .custom #comment_form p { padding: 0.6em 0; } .custom #comment_form label { padding: 0 0 0 10px; font-size: 1.2em; } .custom #comment_form .text_input { width: 425px; padding: 3px; color: #444; float: center; font: bold 1.8em "Lucida Grande", Lucida, Verdana, Arial, Helvetica, sans-serif; border-top: 2px solid #999; border-left: 2px solid #999; border-right: 1px solid #fff; border-bottom: 1px solid #fff; } .custom #comment_form .text_area { width: 375px !important; height: 120px; color: #fff; background: #fff url('images/CommentBG.jpg') right no-repeat; } .custom #comment_form .text_input:focus { border-top: 2px solid #666; border-left: 2px solid #666; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; } .custom #comment_form .form_submit { padding: 0.4em 4px; background: url('images/submit_bg.gif'); border: 3px double #999; border-top-color: #ccc; border-left-color: #ccc; font: bold 1.4em "Lucida Grande", Lucida, Verdana, Arial, Helvetica, sans-serif; cursor: pointer; } .custom #comment_form p.subscribe-to-comments { font-size: 1.4em; } .custom #comment_form p.subscribe-to-comments label { font-size: 1.0em; } /*---:[ search form styles ]:---*/ .custom #search_form { } .custom #search_form .search_input { width: 100px; padding: 3px; margin-top: 5px; color: #cf7f26 ; font: normal 1.0em "Lucida Grande", Lucida, Verdana, Arial, Helvetica, sans-serif; border-top: 1px solid #999; border-left: 1px solid #999; border-right: 1px solid #f5f5f5; border-bottom: 1px solid #f5f5f5; } .custom li.widget .search_input { color: #cf7f26 ; height: 18px; width: 75px; font: normal "Lucida Grande", Lucida, Verdana, Arial, Helvetica, sans-serif; font-size: 14px !important; border-top: 1px solid #999; border-left: 1px solid #999; border-right: 1px solid #f5f5f5; border-bottom: 1px solid #f5f5f5; } .custom #search_form .search_input:focus { border-top: 1px solid #666; border-left: 1px solid #666; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; } .custom #search_icon { padding: 5px; color: #000; display: inline; }